<template>
  <KView class="auction-record-view">
    <KView v-for="record in recordList" :key="`record_${record.id}`" class="clearfix" :class="{'record_champion':maxRecord===record}">
      <KView style="width:10em" class="ellipsis">{{record.userName}}</KView>
      <KView style="width:2em">
        <span v-if="maxRecord===record">领先</span>
        <span v-else>淘汰</span>
      </KView>
      <KView>{{$moment(record.time).format('MM.DD HH:mm:ss')}}</KView>
      <KView class="auction-record-view-price">¥{{record.price}}</KView>

      <KView class="auction-record-view-champion" v-if="maxRecord===record">
        <img class="sys-img" :src="championImg" mode="aspectFit">
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      auction: {
        type: Object,
        required: true
      }
    },

    computed: {
      recordList() {
        return this.auction.auctionRecordList;
      },
      maxRecord() {
        return this.auction.maxRecord;
      }
    },

    data() {
      return {
        championImg:GlobalData.images.oneAuction.champion
      };
    }
  };

</script>

<style lang="scss">
  .auction-record-view {
    padding: 0 formatPx(30);
    padding-top: formatPx(20);

    >div {
      height: formatPx(36);
      font-size: formatPx(26);
      color: #999999;
      margin-bottom: formatPx(20);
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &.record_champion {
        color: #cb9b0c;
      }

      >div {
        height: 100%;
        margin-right: formatPx(26);
        float: left;
      }

      .auction-record-view-price {
        float: right;
        margin-right: 0;
      }
      .auction-record-view-champion{
        position: absolute;
        width: formatPx(40);
        height: formatPx(32);
        top: formatPx(-20);
        left: formatPx(-25);
      }
    }
  }

</style>
